<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>术语库管理 - 文墨勘</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#F4EFEB',
                        secondary: '#EAD2BE', 
                        accent: '#70533B',
                        'text-primary': '#2D2D2D',
                        'text-secondary': '#6B7280',
                        'bg-card': '#FFFFFF',
                        'border-light': '#F3F4F6'
                    },
                    fontFamily: {
                        'chinese': ['-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'button': '0 4px 12px rgba(112, 83, 59, 0.15)',
                        'modal': '0 10px 25px rgba(0, 0, 0, 0.15)'
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .card-hover:active {
            transform: scale(0.98);
            transition: transform 0.1s ease;
        }
        
        .button-active:active {
            transform: translateY(1px);
            box-shadow: 0 2px 8px rgba(112, 83, 59, 0.2);
        }
        
        .modal-overlay {
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }
        
        .modal-enter {
            animation: modalEnter 0.3s ease-out;
        }
        
        @keyframes modalEnter {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        .status-bar {
            height: env(safe-area-inset-top, 44px);
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .safe-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
    </style>
</head>
<body class="bg-primary font-chinese">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="status-bar flex justify-between items-center px-6 text-sm font-medium text-accent">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div id="main-content" class="min-h-screen pb-24">
        <!-- 顶部标题区域 -->
        <header id="page-header" class="gradient-bg px-6 py-6">
            <div class="flex items-center justify-between">
                <button id="back-button" class="w-10 h-10 bg-bg-card rounded-xl flex items-center justify-center shadow-card">
                    <i class="fas fa-arrow-left text-accent"></i>
                </button>
                <h1 id="page-title" class="text-xl font-semibold text-accent">术语库管理</h1>
                <div class="w-10"></div> <!-- 占位元素保持标题居中 -->
            </div>
        </header>

        <!-- 术语统计 -->
        <section id="stats-section" class="px-6 -mt-4 mb-6">
            <div id="stats-card" class="bg-bg-card rounded-2xl p-4 shadow-card">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center">
                            <i class="fas fa-book text-accent text-lg"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-text-primary">术语总数</h3>
                            <p id="total-terms" class="text-2xl font-bold text-accent">8</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="text-xs text-text-secondary">最近更新</p>
                        <p class="text-sm font-medium text-text-primary">2024年1月15日</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 术语列表 -->
        <section id="terms-section" class="px-6 mb-6">
            <div id="section-header" class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-text-primary">我的术语</h2>
                <button id="import-export-button" class="text-sm text-accent flex items-center space-x-1">
                    <i class="fas fa-exchange-alt text-xs"></i>
                    <span>导入导出</span>
                </button>
            </div>
            
            <div id="terms-list" class="space-y-3">
                <!-- 术语项1 -->
                <div id="term-item-1" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex-1">
                            <h3 class="font-semibold text-text-primary mb-1">人工智能</h3>
                            <p class="text-sm text-text-secondary">Artificial Intelligence，简称AI，是指由机器展示的智能，与人类和其他动物所展示的生物智能形成对比。</p>
                        </div>
                        <div class="flex items-center space-x-2 ml-4">
                            <button id="edit-term-1" class="w-8 h-8 bg-secondary rounded-lg flex items-center justify-center text-accent text-sm">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button id="delete-term-1" class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center text-red-500 text-sm">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>技术术语</span>
                        <span>2024年1月15日</span>
                    </div>
                </div>

                <!-- 术语项2 -->
                <div id="term-item-2" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex-1">
                            <h3 class="font-semibold text-text-primary mb-1">区块链</h3>
                            <p class="text-sm text-text-secondary">Blockchain，是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。</p>
                        </div>
                        <div class="flex items-center space-x-2 ml-4">
                            <button id="edit-term-2" class="w-8 h-8 bg-secondary rounded-lg flex items-center justify-center text-accent text-sm">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button id="delete-term-2" class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center text-red-500 text-sm">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>技术术语</span>
                        <span>2024年1月14日</span>
                    </div>
                </div>

                <!-- 术语项3 -->
                <div id="term-item-3" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex-1">
                            <h3 class="font-semibold text-text-primary mb-1">云计算</h3>
                            <p class="text-sm text-text-secondary">Cloud Computing，是基于互联网的相关服务的增加、使用和交付模式，通常涉及通过互联网来提供动态易扩展且经常是虚拟化的资源。</p>
                        </div>
                        <div class="flex items-center space-x-2 ml-4">
                            <button id="edit-term-3" class="w-8 h-8 bg-secondary rounded-lg flex items-center justify-center text-accent text-sm">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button id="delete-term-3" class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center text-red-500 text-sm">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>技术术语</span>
                        <span>2024年1月13日</span>
                    </div>
                </div>

                <!-- 术语项4 -->
                <div id="term-item-4" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex-1">
                            <h3 class="font-semibold text-text-primary mb-1">物联网</h3>
                            <p class="text-sm text-text-secondary">Internet of Things，简称IoT，是指通过信息传感设备，按约定的协议，将任何物体与网络相连接，物体通过信息传播媒介进行信息交换和通信，以实现智能化识别、定位、跟踪、监管等功能。</p>
                        </div>
                        <div class="flex items-center space-x-2 ml-4">
                            <button id="edit-term-4" class="w-8 h-8 bg-secondary rounded-lg flex items-center justify-center text-accent text-sm">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button id="delete-term-4" class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center text-red-500 text-sm">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>技术术语</span>
                        <span>2024年1月12日</span>
                    </div>
                </div>

                <!-- 术语项5 -->
                <div id="term-item-5" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex-1">
                            <h3 class="font-semibold text-text-primary mb-1">机器学习</h3>
                            <p class="text-sm text-text-secondary">Machine Learning，是人工智能的一个分支，它使计算机系统能够自动学习和改进，而无需明确编程。</p>
                        </div>
                        <div class="flex items-center space-x-2 ml-4">
                            <button id="edit-term-5" class="w-8 h-8 bg-secondary rounded-lg flex items-center justify-center text-accent text-sm">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button id="delete-term-5" class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center text-red-500 text-sm">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>技术术语</span>
                        <span>2024年1月11日</span>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 添加术语按钮 -->
    <div id="add-term-container" class="fixed bottom-6 left-6 right-6 safe-bottom">
        <button id="add-term-button" class="w-full bg-accent text-white py-4 rounded-2xl shadow-button button-active flex items-center justify-center space-x-3">
            <i class="fas fa-plus text-lg"></i>
            <span class="text-lg font-semibold">添加术语</span>
        </button>
    </div>

    <!-- 添加/编辑术语弹窗 -->
    <div id="term-modal" class="fixed inset-0 z-50 hidden">
        <div class="modal-overlay absolute inset-0"></div>
        <div class="relative flex items-center justify-center min-h-screen p-6">
            <div id="modal-content" class="bg-bg-card rounded-3xl p-6 w-full max-w-md shadow-modal modal-enter">
                <div class="text-center mb-6">
                    <div class="w-16 h-16 bg-secondary rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <i id="modal-icon" class="fas fa-plus text-accent text-2xl"></i>
                    </div>
                    <h2 id="modal-title" class="text-xl font-semibold text-text-primary">添加术语</h2>
                    <p class="text-sm text-text-secondary mt-2">添加专业术语到您的个人术语库</p>
                </div>
                
                <form id="term-form" class="space-y-4">
                    <div>
                        <label for="term-name" class="block text-sm font-medium text-text-primary mb-2">术语名称</label>
                        <input type="text" id="term-name" name="term-name" class="w-full px-4 py-3 border border-border-light rounded-xl focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="请输入术语名称" required>
                    </div>
                    
                    <div>
                        <label for="term-definition" class="block text-sm font-medium text-text-primary mb-2">术语解释</label>
                        <textarea id="term-definition" name="term-definition" rows="4" class="w-full px-4 py-3 border border-border-light rounded-xl focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none" placeholder="请输入术语的详细解释" required></textarea>
                    </div>
                    
                    <div>
                        <label for="term-category" class="block text-sm font-medium text-text-primary mb-2">术语分类</label>
                        <select id="term-category" name="term-category" class="w-full px-4 py-3 border border-border-light rounded-xl focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent">
                            <option value="技术术语">技术术语</option>
                            <option value="专业术语">专业术语</option>
                            <option value="行业术语">行业术语</option>
                            <option value="学术术语">学术术语</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    
                    <div class="flex space-x-3 pt-4">
                        <button type="button" id="cancel-button" class="flex-1 py-3 px-4 bg-gray-100 text-text-secondary rounded-xl font-medium">
                            取消
                        </button>
                        <button type="submit" id="save-button" class="flex-1 py-3 px-4 bg-accent text-white rounded-xl font-medium shadow-button">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div id="delete-modal" class="fixed inset-0 z-50 hidden">
        <div class="modal-overlay absolute inset-0"></div>
        <div class="relative flex items-center justify-center min-h-screen p-6">
            <div class="bg-bg-card rounded-3xl p-6 w-full max-w-sm shadow-modal modal-enter">
                <div class="text-center mb-6">
                    <div class="w-16 h-16 bg-red-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-exclamation-triangle text-red-500 text-2xl"></i>
                    </div>
                    <h2 class="text-xl font-semibold text-text-primary">确认删除</h2>
                    <p class="text-sm text-text-secondary mt-2">删除后无法恢复，确定要删除这个术语吗？</p>
                </div>
                
                <div class="flex space-x-3">
                    <button id="cancel-delete-button" class="flex-1 py-3 px-4 bg-gray-100 text-text-secondary rounded-xl font-medium">
                        取消
                    </button>
                    <button id="confirm-delete-button" class="flex-1 py-3 px-4 bg-red-500 text-white rounded-xl font-medium">
                        删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let currentEditingTermId = null;
            let currentDeletingTermId = null;
            
            // 返回按钮点击事件
            document.querySelector('#back-button').addEventListener('click', function() {
                // 检查是否有referrer来决定返回哪个页面
                const referrer = document.referrer;
                if (referrer.includes('P-SETTINGS.html')) {
                    window.location.href = 'P-SETTINGS.html';
                } else {
                    window.location.href = 'P-USER_CENTER.html';
                }
            });

            // 添加术语按钮点击事件
            document.querySelector('#add-term-button').addEventListener('click', function() {
                openTermModal('add');
            });

            // 编辑术语按钮点击事件
            document.querySelectorAll('[id^="edit-term-"]').forEach(function(button) {
                button.addEventListener('click', function() {
                    const termId = this.id.split('-')[2];
                    openTermModal('edit', termId);
                });
            });

            // 删除术语按钮点击事件
            document.querySelectorAll('[id^="delete-term-"]').forEach(function(button) {
                button.addEventListener('click', function() {
                    const termId = this.id.split('-')[2];
                    currentDeletingTermId = termId;
                    openDeleteModal();
                });
            });

            // 术语表单提交事件
            document.querySelector('#term-form').addEventListener('submit', function(e) {
                e.preventDefault();
                saveTerm();
            });

            // 取消按钮点击事件
            document.querySelector('#cancel-button').addEventListener('click', function() {
                closeTermModal();
            });

            // 取消删除按钮点击事件
            document.querySelector('#cancel-delete-button').addEventListener('click', function() {
                closeDeleteModal();
            });

            // 确认删除按钮点击事件
            document.querySelector('#confirm-delete-button').addEventListener('click', function() {
                deleteTerm();
            });

            // 点击弹窗背景关闭弹窗
            document.querySelector('#term-modal .modal-overlay').addEventListener('click', function() {
                closeTermModal();
            });

            document.querySelector('#delete-modal .modal-overlay').addEventListener('click', function() {
                closeDeleteModal();
            });

            // 导入导出按钮点击事件
            document.querySelector('#import-export-button').addEventListener('click', function() {
                console.log('需要实现术语库导入导出功能');
                // 这里可以添加导入导出的逻辑
            });

            // 打开术语弹窗
            function openTermModal(mode, termId = null) {
                const modal = document.querySelector('#term-modal');
                const title = document.querySelector('#modal-title');
                const icon = document.querySelector('#modal-icon');
                const form = document.querySelector('#term-form');
                
                if (mode === 'add') {
                    title.textContent = '添加术语';
                    icon.className = 'fas fa-plus text-accent text-2xl';
                    form.reset();
                    currentEditingTermId = null;
                } else if (mode === 'edit') {
                    title.textContent = '编辑术语';
                    icon.className = 'fas fa-edit text-accent text-2xl';
                    loadTermData(termId);
                    currentEditingTermId = termId;
                }
                
                modal.classList.remove('hidden');
                setTimeout(() => {
                    document.querySelector('#term-name').focus();
                }, 100);
            }

            // 关闭术语弹窗
            function closeTermModal() {
                const modal = document.querySelector('#term-modal');
                modal.classList.add('hidden');
                currentEditingTermId = null;
            }

            // 打开删除确认弹窗
            function openDeleteModal() {
                const modal = document.querySelector('#delete-modal');
                modal.classList.remove('hidden');
            }

            // 关闭删除确认弹窗
            function closeDeleteModal() {
                const modal = document.querySelector('#delete-modal');
                modal.classList.add('hidden');
                currentDeletingTermId = null;
            }

            // 加载术语数据到表单
            function loadTermData(termId) {
                const termItem = document.querySelector(`#term-item-${termId}`);
                if (termItem) {
                    const name = termItem.querySelector('h3').textContent;
                    const definition = termItem.querySelector('p').textContent;
                    const category = termItem.querySelector('.text-xs.text-text-secondary').textContent;
                    
                    document.querySelector('#term-name').value = name;
                    document.querySelector('#term-definition').value = definition;
                    document.querySelector('#term-category').value = category;
                }
            }

            // 保存术语
            function saveTerm() {
                const name = document.querySelector('#term-name').value.trim();
                const definition = document.querySelector('#term-definition').value.trim();
                const category = document.querySelector('#term-category').value;
                
                if (!name || !definition) {
                    alert('请填写完整的术语信息');
                    return;
                }
                
                if (currentEditingTermId) {
                    // 编辑现有术语
                    updateTermInList(currentEditingTermId, name, definition, category);
                } else {
                    // 添加新术语
                    addTermToList(name, definition, category);
                }
                
                closeTermModal();
                updateTermCount();
            }

            // 添加术语到列表
            function addTermToList(name, definition, category) {
                const termsList = document.querySelector('#terms-list');
                const newTermId = Date.now(); // 使用时间戳作为唯一ID
                
                const termHTML = `
                    <div id="term-item-${newTermId}" class="bg-bg-card rounded-2xl p-4 shadow-card">
                        <div class="flex items-start justify-between mb-3">
                            <div class="flex-1">
                                <h3 class="font-semibold text-text-primary mb-1">${name}</h3>
                                <p class="text-sm text-text-secondary">${definition}</p>
                            </div>
                            <div class="flex items-center space-x-2 ml-4">
                                <button id="edit-term-${newTermId}" class="w-8 h-8 bg-secondary rounded-lg flex items-center justify-center text-accent text-sm">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button id="delete-term-${newTermId}" class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center text-red-500 text-sm">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-xs text-text-secondary">
                            <span>${category}</span>
                            <span>${getCurrentDate()}</span>
                        </div>
                    </div>
                `;
                
                termsList.insertAdjacentHTML('beforeend', termHTML);
                
                // 为新添加的按钮绑定事件
                bindTermEvents(newTermId);
            }

            // 更新列表中的术语
            function updateTermInList(termId, name, definition, category) {
                const termItem = document.querySelector(`#term-item-${termId}`);
                if (termItem) {
                    termItem.querySelector('h3').textContent = name;
                    termItem.querySelector('p').textContent = definition;
                    termItem.querySelector('.text-xs.text-text-secondary').textContent = category;
                    termItem.querySelectorAll('.text-xs.text-text-secondary')[1].textContent = getCurrentDate();
                }
            }

            // 删除术语
            function deleteTerm() {
                if (currentDeletingTermId) {
                    const termItem = document.querySelector(`#term-item-${currentDeletingTermId}`);
                    if (termItem) {
                        termItem.remove();
                        updateTermCount();
                    }
                }
                closeDeleteModal();
            }

            // 为术语项绑定事件
            function bindTermEvents(termId) {
                // 编辑按钮事件
                document.querySelector(`#edit-term-${termId}`).addEventListener('click', function() {
                    openTermModal('edit', termId);
                });
                
                // 删除按钮事件
                document.querySelector(`#delete-term-${termId}`).addEventListener('click', function() {
                    currentDeletingTermId = termId;
                    openDeleteModal();
                });
            }

            // 更新术语总数
            function updateTermCount() {
                const termItems = document.querySelectorAll('[id^="term-item-"]');
                document.querySelector('#total-terms').textContent = termItems.length;
            }

            // 获取当前日期
            function getCurrentDate() {
                const now = new Date();
                return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
            }
        });
    </script>
</body>
</html>